import { Modal, Button } from 'antd';
import { useEffect, useState } from 'react';

export default function ReloadModal({ open: initOpen }: { open: boolean }) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setOpen(initOpen);
  }, [initOpen]);
  const backHome = () => {
    window.location.replace('/projects');
  };
  const reloadPage = () => {
    setLoading(true);
    window.setTimeout(() => {
      window.location.reload();
      setLoading(false);
      setOpen(false);
    }, 1000);
  };
  return (
    <Modal
      title='提示'
      open={open}
      centered
      footer={[
        <Button
          onClick={backHome}
          key='backHome'>
          返回主页
        </Button>,
        <Button
          type='primary'
          loading={loading}
          onClick={reloadPage}
          key='reloadPage'>
          刷新页面
        </Button>,
      ]}>
      <p>连接超时，请返回主页或刷新页面</p>
    </Modal>
  );
}
